<template>
	<div
		class="shape"
		:class="{ active }"
		@click="selectCurComponent"
		:id="`editor${comData.groupWareCode}`"
		:style="getShapeStyle()"
		@mousedown="handleMouseDown($event, comData)"
	>
		<div
			:class="{ 'shape-point': isDragZoom }"
			v-for="item in (isActive() ? pointList : [])"
			@mousedown="handleMouseDownOnPoint(item, $event)"
			:key="item"
			:style="getPointStyle(item)"
		></div>
		<slot></slot>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
//eslint-disable-next-line
import { $, floatRound } from '@/utils'
//引入监听缩放的插件
//eslint-disable-next-line
import elementResizeDetectorMaker from "element-resize-detector"
export default {
	props: {
		active: {
			type: Boolean,
			default: false,
		},
		//当前dom的值
		comData: {
			require: true,
			type: Object
		},
		//当前dom父级元素的值
		parentComData: {
			type: Object,
			default: () => {
				return {}
			}
		},
		isDragZoom: {
			typeof: Boolean,
			default: true
		}
	},
	data() {
		return {
			pointList: ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'], // 八个方向
			cursors: { "lt": "nw-resize", "t": "n-resize", "rt": "ne-resize", "r": "e-resize", "rb": "se-resize", "b": "s-resize", "lb": "sw-resize", "l": "w-resize" },
		}
	},
	computed: mapState([
		'curComponent',
		'canvasStyleData',
		'customdivList'
	]),
	mounted() {
		// let erd = elementResizeDetectorMaker();
		// erd.listenTo(document.getElementById(`editor${this.comData.groupWareCode}`), () => {
		// 	this.curComponent && this.curComponent.childrenData && this.setExampleInEchartsStyle()
		// });
	},
	methods: {
		...mapMutations([
			'setCurComponent',
			'setShapeStyle',
			'setDisableStyle',
			'setExampleInEchartsStyle'
		]),
		isActive() {
			return this.active
		},
		getPointStyle(point) {
			const hasT = /t/.test(point)
			const hasB = /b/.test(point)
			const hasL = /l/.test(point)
			const hasR = /r/.test(point)
			let newLeft = 0
			let newTop = 0
			// 四个角的点
			if (point.length === 2) {
				newLeft = hasL ? 0 : this.comData.fxffWidth
				newTop = hasT ? 0 : this.comData.fxffHeight
			} else {
				// 上下两点的点，宽度居中
				if (hasT || hasB) {
					newLeft = this.comData.fxffWidth / 2
					newTop = hasT ? 0 : this.comData.fxffHeight
				}
				// 左右两边的点，高度居中
				if (hasL || hasR) {
					newLeft = hasL ? 0 : this.comData.fxffWidth
					newTop = Math.floor(this.comData.fxffHeight / 2)
				}
			}

			const style = {
				marginLeft: hasR ? '-4px' : '-4px',
				marginTop: '-4px',
				left: `${newLeft}px`,
				top: `${newTop}px`,
				cursor: this.cursors[point],
			}
			return style

		},
		selectCurComponent(e) {
			// 阻止向父组件冒泡
			e.stopPropagation()
			e.preventDefault()
			if (this.isDragZoom) {
				this.setCurComponent({ component: this.comData })
			}
			// console.log(e,'==e')
		},
		//拖拽
		handleMouseDown(e, item) {

			if (this.isDragZoom) {
				e.stopPropagation()
				e.preventDefault()
				this.setCurComponent({ component: this.comData })
				let pos = {}
				pos.width = item.fxffWidth
				pos.height = item.fxffHeight
				const startTop = Number(item.fxffY)
				const startLeft = Number(item.fxffX)
				if (item.kjzFbl) {
					let fblData = this.comData.kjzFbl.split("*")
					//可移动的最大top
					const maxDragTop = Number(fblData[1]) - item.fxffHeight - 5
					//可移动的最大left
					const maxDragLeft = Number(fblData[0]) - item.fxffWidth - 5
					//点击位置开始的x,y的坐标轴
					const startY = e.clientY
					const startX = e.clientX

					const move = (moveEvent) => {
						//移动后x,y轴的位置
						const currX = moveEvent.clientX
						const currY = moveEvent.clientY
						pos.top = currY - startY + startTop
						pos.left = currX - startX + startLeft
						//做好区域限制
						if (pos.top <= 0) {
							pos.top = 0
						}
						if (pos.left <= 0) {
							pos.left = 0
						}

						if (pos.top >= maxDragTop) {
							pos.top = maxDragTop
						}
						if (pos.left >= maxDragLeft) {
							pos.left = maxDragLeft
						}

						this.setShapeStyle(pos)
					}
					const up = () => {
						document.removeEventListener('mousemove', move)
						document.removeEventListener('mouseup', up)
					}

					document.addEventListener('mousemove', move)
					document.addEventListener('mouseup', up)
				} else {
					console.log(this.customdivList, '==customdivList')
					//可移动的最大top
					const maxDragTop = this.customdivList[0].height - item.fxffHeight - 5
					//可移动的最大left
					const maxDragLeft = this.customdivList[0].width - item.fxffWidth - 5
					//点击位置开始的x,y的坐标轴
					const startY = e.clientY
					const startX = e.clientX

					const move = (moveEvent) => {
						//移动后x,y轴的位置
						const currX = moveEvent.clientX
						const currY = moveEvent.clientY
						pos.top = currY - startY + startTop
						pos.left = currX - startX + startLeft
						//做好区域限制
						if (pos.top <= 0) {
							pos.top = 0
						}
						if (pos.left <= 0) {
							pos.left = 0
						}

						if (pos.top >= maxDragTop) {
							pos.top = maxDragTop
						}
						if (pos.left >= maxDragLeft) {
							pos.left = maxDragLeft
						}

						this.setShapeStyle(pos)
					}
					const up = () => {
						document.removeEventListener('mousemove', move)
						document.removeEventListener('mouseup', up)
					}

					document.addEventListener('mousemove', move)
					document.addEventListener('mouseup', up)
				}
			}


		},
		//缩放
		handleMouseDownOnPoint(point, e) {
			if (this.isDragZoom) {
				e.stopPropagation()
				e.preventDefault()
				const pos = {}
				const height = this.comData.fxffHeight
				const width = this.comData.fxffWidth
				const top = this.comData.fxffY
				const left = this.comData.fxffX
				const startX = e.clientX
				const startY = e.clientY
				if (this.comData.kjzFbl) {
					const fblData = this.comData.kjzFbl.split("*")

					const move = (moveEvent) => {
						const currX = moveEvent.clientX
						const currY = moveEvent.clientY
						const disY = currY - startY
						const disX = currX - startX
						const hasT = /t/.test(point)
						const hasB = /b/.test(point)
						const hasL = /l/.test(point)
						const hasR = /r/.test(point)
						const newHeight = height + (hasT ? -disY : hasB ? disY : 0)
						const newWidth = width + (hasL ? -disX : hasR ? disX : 0)
						pos.height = newHeight > 0 ? newHeight : 0
						pos.width = newWidth > 0 ? newWidth : 0
						pos.left = left + (hasL ? disX : 0)
						pos.top = top + (hasT ? disY : 0)
						if (pos.top <= 0) {
							pos.top = 0
						}
						if (pos.left <= 0) {
							pos.left = 0
						}
						//控制缩放的最大高度
						if (pos.height + pos.top >= Number(fblData[1])) {
							pos.height = Number(fblData[1]) - pos.top - 5
						}
						// //控制缩放的最大宽度
						if (pos.width + pos.left >= Number(fblData[0])) {
							pos.width = Number(fblData[1]) - pos.left - 5
						}

						const data = {
							...pos
						}
						this.setShapeStyle(data)
					}

					const up = () => {
						document.removeEventListener('mousemove', move)
						document.removeEventListener('mouseup', up)
					}

					document.addEventListener('mousemove', move)
					document.addEventListener('mouseup', up)
				} else {
					const move = (moveEvent) => {
						const maxHeight = this.customdivList[0].height
						const maxWidth = this.customdivList[0].width
						const currX = moveEvent.clientX
						const currY = moveEvent.clientY
						const disY = currY - startY
						const disX = currX - startX
						const hasT = /t/.test(point)
						const hasB = /b/.test(point)
						const hasL = /l/.test(point)
						const hasR = /r/.test(point)
						const newHeight = height + (hasT ? -disY : hasB ? disY : 0)
						const newWidth = width + (hasL ? -disX : hasR ? disX : 0)
						pos.height = newHeight > 0 ? newHeight : 0
						pos.width = newWidth > 0 ? newWidth : 0
						pos.left = left + (hasL ? disX : 0)
						pos.top = top + (hasT ? disY : 0)
						if (pos.top <= 0) {
							pos.top = 0
						}
						if (pos.left <= 0) {
							pos.left = 0
						}
						//控制缩放的最大高度
						if (pos.height + pos.top >= maxHeight) {
							pos.height = maxHeight - pos.top - 5
						}
						// //控制缩放的最大宽度
						if (pos.width + pos.left >= maxWidth) {
							pos.width = maxWidth - pos.left - 5
						}

						const data = {
							...pos
						}
						this.setShapeStyle(data)
					}

					const up = () => {
						document.removeEventListener('mousemove', move)
						document.removeEventListener('mouseup', up)
					}

					document.addEventListener('mousemove', move)
					document.addEventListener('mouseup', up)
				}

			}

		},
		getShapeStyle() {
			const result = {};

			result['height'] = this.comData.fxffHeight + 'px'
			result['width'] = this.comData.fxffWidth + 'px'
			result['left'] = this.comData.fxffX + 'px'
			result['top'] = this.comData.fxffY + 'px'


			return result
		},

	},
}
</script>

<style lang="scss" scoped>
.shape {
	position: absolute;
	border: 1px solid #ccc;
	&:hover {
		cursor: move;
	}
}
.active {
	outline: 1px solid #70c0ff;
	user-select: none;
}
.shape-point {
	position: absolute;
	background: #fff;
	border: 1px solid #59c7f9;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	z-index: 1;
}
</style>
